<!-- @format -->
<script setup>
	// 2. 局部导入组件

	// 大驼峰：每个单词的首字母都大写
	// 烤串法：每个单词都小写，不同的单词之间用短横线连接

	// 注意：导入的组件对象名称推荐使用大驼峰
	import MyPanel from './components/MyPanel.vue'
</script>
<template>
	<h3>可折叠面板</h3>
	<!-- 4.
    使用组件：既可以是双标签，也可以是自闭和的单标签
    推荐：
     1. 使用烤串法的标签名，更加符合W3C规范(所有标签一律小写)
     2. 至于使用单标签还是双标签，取决人个人
  -->
	<MyPanel />
	<MyPanel></MyPanel>
	<my-panel />
	<my-panel></my-panel>
</template>

<style lang="scss">
	// npm i sass -D
	// npm run dev
	body {
		background-color: #ccc;
	}

	#app {
		width: 400px;
		margin: 20px auto;
		background-color: #fff;
		border: 4px solid green;
		border-radius: 1em;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
		padding: 1em 2em 2em;
	}
	#app h3 {
		text-align: center;
	}
</style>
